<template>


   <div class="">
    <el-row :gutter="20" >
      <el-col :span="6">
    <el-input v-model="orderNo" @blur="search" style="width: 240px"  clearable placeholder="请输入订单号" />
        
      </el-col>
      <el-col :span="6">
         
        <el-select
    v-model="value"
    placeholder="全部"
    size="large"
    style="width: 240px"
    @change="changeFun"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
      </el-col>
      <el-col :span="12">
        <el-button type="success" @click="checkDone">
    <el-icon><House /></el-icon>
    配货完成</el-button>
<el-button type="success" @click="checkout">
  <el-icon><House /></el-icon>
  出库</el-button>
<el-button type="danger" @click="bigdel">
  <el-icon><Delete /></el-icon>
  关闭订单</el-button>
      </el-col>
    </el-row>
  
  <!-- {{ value }} -->

  
   </div>
  <el-table ref="multipleTableRef" :data="listone" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column label="订单号" width="120">
      <template #default="scope">{{ scope.row.orderNo }}</template>
    </el-table-column>
    <el-table-column property="totalPrice" label="订单总价" />
    <el-table-column property="orderStatus" label="订单状态">
      <template #default="scope">
        <span v-if="scope.row.orderStatus == 0">待支付</span>
        <span v-else-if="scope.row.orderStatus == 1">已支付</span>
        <span v-else-if="scope.row.orderStatus == 2">配货完成</span>
        <span v-else-if="scope.row.orderStatus == 3">出库成功</span>
        <span v-else-if="scope.row.orderStatus == 4">交易成功</span>
        <span v-else-if="scope.row.orderStatus == -1">手动关闭</span>
        <span v-else-if="scope.row.orderStatus == -2">超时关闭</span>
        <span v-else-if="scope.row.orderStatus == -3">商家关闭</span>

      </template>

    </el-table-column>
    <el-table-column property="payType" label="交易方式">
      <template #default="scope">
        <span v-if="scope.row.payType == 0">未支付</span>
        <span v-else-if="scope.row.payType == 1">微信支付</span>
        <span v-else>支付宝支付</span>
      </template>

    </el-table-column>
    <el-table-column property="createTime" label="创建时间" />

    <el-table-column label="操作">
      <template #default="scope">
        <!-- {{ scope.row.redirectUrl }} -->
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          关闭订单
        </el-button>
        <el-button size="small" type="primary" @click="handlePut(scope.$index, scope.row)">
          订单详情
        </el-button>


      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->

  <el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="total" />

</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { ElTable,ElMessage } from 'element-plus'
import axios from '../../ajax';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import {  Delete,House } from '@element-plus/icons-vue'

let route = useRoute()
let router = useRouter()

import { ArrowLeftBold } from '@element-plus/icons-vue'

// 搜索订单号
let  orderNo=ref("")
const search=()=>{
  getdata(1);
}



// 

const multipleTableRef = ref()

const multipleSelection = ref([])

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
//拿数据
onMounted(() => {

  getdata(1);

})
let listone = ref([])
let total = ref(0)

let getdata = async (pageNumber,) => { //表单数据 封装
  let { list, totalCount } = await axios.get('/orders', {
    params: {
      pageNumber,
      pageSize: 10,
      orderNo:orderNo.value,
      orderStatus:value.value
    }
  })

  listone.value = list
  total.value = totalCount

}






//分页
let currentChange = (page) => {
  getdata(page);
}


// 关闭一个订单************************************
let handleDelete = (i, row) => {
  listone.value.splice(i, 1)
  getid([row.orderId])
}
let getid = async (ids) => {//删除
  let res = await axios.put('/orders/close', { ids })
}
let bigdel = () => {//删除多个*************************************

  if (multipleSelection.value.length == 0) {
    // alert("未选择")
    ElMessage.error('未选择!')
  }

  let arry = []
  multipleSelection.value.map(item => arry.push(item.orderId))

  multipleSelection.value.map(item => {
    listone.value.map((items, index) => {
      if (item.orderId == items.orderId) {
        listone.value.splice(index, 1)
      }
    })
  })


  getid(arry)
}
// 订单详情*************************

let handlePut = (i, row) => {

  router.push({
    name: "Orderdetail",
    query: {
      id: row.orderId
    }
  })
}
// 订单状态选择

const value = ref('')

const options = [
  {
    value: "",
    label: '全部',
  },
  {
    value: 0,
    label: '待支付',
  },
  {
    value: 1,
    label: '已支付',
  },
  {
    value: 2,
    label: '配货完成',
  },
  {
    value: 3,
    label: '出库成功',
  },
  {
    value:4,
    label: '交易成功',
  },
  {
    value: -1,
    label: '手动关闭',
  },
  {
    value: -2,
    label: '超时关闭',
  },
  {
    value: -3,
    label: '商家关闭',
  },
]

const changeFun=(val)=>{
  console.log(val);
  getdata(1)
}


let checkDone=async ()=>{// 配货完成

  let ids = []
  multipleSelection.value.map(item => ids.push(item.orderId))

  let res =await axios.put('/orders/checkDone',{
    ids
  })
  getdata(1)
}
let checkout=async ()=>{
  let ids = []
  multipleSelection.value.map(item => ids.push(item.orderId))

  let res =await axios.put('/orders/checkOut',{
    ids
  })
  getdata(1)
}
</script>

<style lang="scss" scoped>
.el-pagination {
  justify-content: center;
}
.ma{
  margin-left: 20px;
}
</style>